<template>
    <div>
        <div ref="container2" class="item"></div>
        <div ref="container1" class="item"></div>
    </div>
</template>

<script>
import G6 from "@antv/g6";
const axios = require("axios");

export default {
    name: "",
    data () {
        return {
            graph: null,
            initData2: {},
            objData: { name: "zdh" }
        };
    },
    watch: {
        middle: {
            handler (val, oldVal) {
                // console.log(val);
                // console.log(oldVal);
            },
            deep: true
        }
    },
    computed: {
        middle () {
            return JSON.parse(JSON.stringify(this.objData));
        }
    },
    methods: {
        renderGraph1 () {
            const data = {
                nodes: [
                    {
                        id: "node1",
                        label: "Start"
                        // x: 150,
                        // y: 150
                    }
                    // {
                    //     id: "node2",
                    //     label: "End",
                    //     x: 400,
                    //     y: 150
                    // }
                ],
                edges: [
                    // {
                    //     source: "node1",
                    //     target: "node2",
                    //     label: "line"
                    // }
                ]
            };

            this.graph = new G6.Graph({
                container: this.$refs.container1,
                width: 500,
                height: 500,
                modes: {
                    default: ["drag-canvas", "zoom-canvas", "drag-node"]
                },
                defaultNode: {
                    type: "rect",
                    size: [100, 50],
                    color: "#5b8ff9",
                    style: {
                        fill: "#9ec9ff",
                        lineWidth: 3
                    },
                    labelCfg: {
                        style: {
                            fill: "#fff",
                            fontSize: 20
                        }
                    }
                },
                defaultEdge: {
                    type: "polyline",
                    style: {
                        stroke: "#ff0000"
                    },
                    labelCfg: {
                        style: {
                            fill: "orange"
                        }
                    }
                }
            });
            console.log(data);
            this.graph.data(data); // 读取数据
            this.graph.render(); // 渲染图
        },
        renderGraph2 () {
            // 注册图形
            G6.registerNode("customNode", {
                draw (cfg, group) {
                    const {
                        label
                    } = cfg;

                    const rectConfig = {
                        width: 100,
                        height: 40,
                        lineWidth: 1,
                        fill: "#fff",
                        radius: 4,
                        stroke: "#ced4d9",
                        opacity: 1
                    };

                    const nodeOrigin = {
                        x: -rectConfig.width / 2,
                        y: -rectConfig.height / 2
                    };

                    const textConfig = {
                        textAlign: "center",
                        textBaseline: "bottom"
                    };
                    // 画大的矩形
                    const rect = group.addShape("rect", {
                        attrs: {
                            x: nodeOrigin.x,
                            y: nodeOrigin.y,
                            ...rectConfig
                        }
                    });
                    const rectBBox = rect.getBBox();

                    // 画左边蓝色竖条
                    group.addShape("rect", {
                        attrs: {
                            x: nodeOrigin.x,
                            y: nodeOrigin.y,
                            width: 4,
                            height: rectConfig.height,
                            fill: "#409eff",
                            radius: 2
                        }
                    });
                    const title = group.addShape("text", {
                        attrs: {
                            ...textConfig,
                            x: 40 + nodeOrigin.x,
                            y: 30 + nodeOrigin.y,
                            text: label,
                            fontSize: 16,
                            fill: "#000"
                        },
                        name: "name-shape"
                    });

                    return rect;
                }
            });

            // 实例化图形
            this.graph = new G6.Graph({
                container: this.$refs.container2,
                width: 500,
                height: 500,
                fitCenter: true,
                modes: {
                    default: ["drag-canvas", "drag-node"]
                },
                defaultNode: {
                    type: "customNode",
                    anchorPoints: [
                        [0, 0.5],
                        [1, 0.5]
                    ]
                },
                defaultEdge: {
                    type: "polyline",
                    style: {
                        stroke: "#adadad",
                        radius: 0,
                        offset: 20,
                        endArrow: {
                            path: G6.Arrow.triangle(8, 8, 0),
                            fill: "#adadad"
                        }
                    }
                },
                layout: {
                    type: "dagre",
                    rankdir: "LR",
                    controlPoints: false,
                    nodesep: 2,
                    ranksep: 50
                },
                plugins: ["minimap"]
            });

            // 数据
            this.initData2 = {
                nodes: [
                    { id: "node", label: "Circle" },
                    { id: "node1", label: "Circle1" },
                    { id: "node2", label: "Circle2" },
                    { id: "node3", label: "Circle3" },
                    { id: "node4", label: "Circle4" },
                    { id: "node5", label: "Circle5" },
                    { id: "node6", label: "Circle6" }
                ],
                edges: [
                    { source: "node", target: "node1" },
                    { source: "node", target: "node2" },
                    { source: "node", target: "node3" },
                    { source: "node", target: "node4" },
                    { source: "node", target: "node5" },
                    { source: "node", target: "node6" }
                ]
            };

            // 渲染
            this.graph.data(this.initData2);
            this.graph.render();
        }
    },
    created () {},
    mounted () {
        this.renderGraph1();
        this.renderGraph2();
        this.objData.name = "zzz";
    }
};
</script>

<style scoped>
.item {
    float: left;
    margin: 10px 0 0 10px;
    border: 1px solid #cecece;
}
</style>
